<template>
	<view>
		<!-- 选项卡 -->
		<u-tabs :list="tabs" @change="handleTabChange" :lineWidth="3" :lineHeight="3" :lineColor="'#09f'"
			:activeStyle="{ color: '#09f', fontWeight: 'bold' }" :inactiveStyle="{ color: '#606266' }" />

		<!-- 当前选中的 tab 的内容 -->
		<view class="order-list">
			{{curId}}
			<view v-if="curId === 0" class="order-item" v-for="order in pendingOrders" :key="order.id">
				<view class="order-details">
					<text>订单号: {{ order.id }}</text>
					<text>状态: {{ order.status }}</text>
					<text>总价: {{ order.totalPrice }}元</text>
				</view>
				<u-button @click="confirmOrder(order.id)" type="primary">确认</u-button>
			</view>

			<view v-else-if="curId === 1" class="order-item" v-for="order in completedOrders" :key="order.id">
				<view class="order-details">
					<text>订单号: {{ order.id }}</text>
					<text>状态: {{ order.status }}</text>
					<text>总价: {{ order.totalPrice }}元</text>
				</view>
			</view>

			<view v-else-if="curId === 2" class="order-item" v-for="order in cancelledOrders" :key="order.id">
				<view class="order-details">
					<text>订单号: {{ order.id }}</text>
					<text>状态: {{ order.status }}</text>
					<text>总价: {{ order.totalPrice }}元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中的 tab 索引
				curId: 0,
				// 选项卡列表
				tabs: [{
						name: '待处理'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					},
				],
				// 订单数据
				pendingOrders: [{
						id: 1,
						status: '待处理',
						totalPrice: 99
					},
					{
						id: 2,
						status: '待处理',
						totalPrice: 49
					},
				],
				completedOrders: [{
						id: 3,
						status: '已完成',
						totalPrice: 79
					},
					{
						id: 4,
						status: '已完成',
						totalPrice: 129
					},
				],
				cancelledOrders: [{
					id: 5,
					status: '已取消',
					totalPrice: 0
				}, ],
			};
		},
		methods: {
			handleTabChange(event) {
				console.log(event)
				this.curId = event.index; // 获取当前 tab 的索引
			},
			confirmOrder(orderId) {
				// 处理订单确认逻辑
				console.log(`订单 ${orderId} 已确认`);
				// 这里可以添加逻辑将订单状态更新为已完成
			},
		},
	};
</script>

<style scoped>
	.order-list {
		padding: 16px;
	}

	.order-item {
		margin-bottom: 12px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.order-details {
		margin-bottom: 8px;
	}
</style>